<template>
  <div class="use-pagination" :style="pagePosition">
    <a-pagination :total="total"
                  v-model:page-size="pageSize"
                  :current="page"
                  show-size-changer
                  :size="size"
                  :show-total="(totals:number) => `共 ${totals} 条数据`"
                  @change="onChange"/>
  </div>
</template>

<script setup lang="ts">
import {computed, ref, type PropType} from "vue";
type Position = 'left' | 'center' | 'right';
const pageSize = ref(10)
const props = defineProps({
  size:{type:String,default:'middle'},
  total:{type:Number,default:0},
  page:{type:Number,default:1},
  position:{type:String as PropType<Position>,default:'center'}
})
const pagePosition = computed(()=>{
  let justify:string
  switch (props.position){
    case 'center':
      justify = 'center';
      break;
    case 'right':
      justify = 'flex-end'
          break;
    default:
      justify = 'flex-start'
  }
  return {justifyContent:justify}
})

const emit = defineEmits(['change'])
const onChange = (page:number, pageSize:number)=>{
  const params:{page:number,page_size:number} ={
    page:page,
    page_size:pageSize
  }
  emit('change',params)
}
</script>

<style scoped>
  .use-pagination {
    padding-top: var(--space);
    display: flex;
  }
</style>